import React from 'react';
import PropTypes from 'prop-types';
import Button from './Button';

export default function ColorButton(props) {
    const {disabledContainerStyle, disabled, styleDisabled, onPress} = props;
    return <Button disabled={disabled}
                    onPress={onPress}
                   styleDisabled={styleDisabled}
                   disabledContainerStyle={disabledContainerStyle}
                   containerStyle={{
                       height: props.height,
                       borderRadius: props.borderRadius || (props.height / 2),
                       justifyContent: 'center',
                       backgroundColor: props.backgroundColor,
                       ...props.containerStyle,
                   }}
                   style={{
                       fontSize: props.fontSize,
                       color: props.color,
                       ...props.style,
                   }}>
        {props.title || props.children}
    </Button>;
}

ColorButton.propTypes = {
    ...Button.propTypes,
    height: PropTypes.number,
    borderRadius: PropTypes.number,
    fontSize: PropTypes.number,
    backgroundColor: PropTypes.string,
    color: PropTypes.string,
    title: PropTypes.string,
};

ColorButton.defaultProps = {
    height: 44,
    fontSize: 14,
    color: 'white',
    backgroundColor: '#2992E3',
};
